<template>
    <div class="classPaper">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="班级文章" name="classPaper">
                <el-row v-if="!isDetailShow">
                    <el-col :span="24">
                        <div class="content clearFix" @click="isDetailShow=true">
                            <label>70周年阅兵感悟</label>
                            <span class="time">2019-10-12</span>
                        </div>
                        <div class="content clearFix">
                            <label>70周年阅兵感悟</label>
                            <span class="time">2019-10-12</span>
                        </div>
                        <div class="content clearFix">
                            <label>70周年阅兵感悟</label>
                            <span class="time">2019-10-12</span>
                        </div>
                        <div class="content clearFix">
                            <label>70周年阅兵感悟</label>
                            <span class="time">2019-10-12</span>
                        </div>
                        <div class="content clearFix">
                            <label>70周年阅兵感悟</label>
                            <span class="time">2019-10-12</span>
                        </div>
                    </el-col>
                </el-row>
                <div class="block" v-if="!isDetailShow">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[100, 200, 300, 400]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="400">
                    </el-pagination>
                </div>

                <ClassArticleDetail v-if="isDetailShow" :activeIndex="1"></ClassArticleDetail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import ClassArticleDetail from '@c/article/classArticleDetail'
    export default {
        components:{
            ClassArticleDetail
        },
        data() {
            return {
                activeName: 'classPaper',
                currentPage:1,
                isDetailShow:false
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .classPaper{
        background-color: white;
        box-sizing: border-box;
        padding: 0 10px;
        min-height: 70vh;
        .content{
            font-size: 14px;
            color: #303133;
            margin-bottom: 10px;
            text-align: left;
            cursor: pointer;
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
            label{
                cursor: pointer;
            }
            .time{
                font-size: 12px;
                float: right;
                margin-top: 5px;
            }
        }
    }
    .clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>